<div>
    <div nz-row [nzGutter]="24">
        <nz-col [nzSpan]="4">
            <div>用户名称</div>
        </nz-col>
        <nz-col [nzSpan]="6">
            <input nz-input [(ngModel)]="user.username" [disabled]="true" />
        </nz-col>
        <nz-col [nzSpan]="4">
            <div>用户昵称</div>
        </nz-col>
        <nz-col [nzSpan]="6">
            <input nz-input [(ngModel)]="user.nickName" [disabled]="true" />
        </nz-col>
    </div>

    <nz-divider />

    <h3>角色</h3>
    <div class="tree-content" >
        <nz-tree style="border-style: solid; border-width: thin; overflow-y: scroll; min-height: 480px; max-height: 480px;" 
        #nzTreeComponent [nzData]="roleNodes" nzCheckable [nzCheckedKeys]="defaultCheckedKeys"
            [nzExpandedKeys]="defaultExpandedKeys" [nzSelectedKeys]="defaultSelectedKeys" (nzClick)="nzClick($event)"
            (nzContextMenu)="nzClick($event)" (nzCheckBoxChange)="nzCheck($event)" (nzExpandChange)="nzCheck($event)">

        </nz-tree>
    </div>

    <nz-divider />

    <div nz-row nzJustify="end">
        <nz-col>
            <button nz-button class="dialog-button" (click)="onAssign($event)">确定</button>
            <button nz-button class="dialog-button" (click)="onCancel()">取消</button>
        </nz-col>
    </div>
</div>